<!--
 * @Descripttion:
 * @Author: xiao li
 * @Date: 2020-10-20 11:31:01
 * @LastEditors: xiao li
 * @LastEditTime: 2020-10-20 18:06:03
-->
<template>
  <div>
    <div class="fill-base pl-lg pr-lg">
      <div class="normal-list b-1px-b">
        <div class="flex-1 f-paragraph c-title">
          {{ o.data.title || '推荐' }}
        </div>
        <div class="f-caption c-caption">{{ o.data.more || '查看更多' }}</div>
        <div
          class="iconfont iconright"
          style="color: #999; font-size: 12px"
        ></div>
      </div>
    </div>
    <div
      class="fill-base pd-lg flex-center"
      :class="[{ 'b-1px-t': index !== 0 }]"
      v-for="(item, index) in 4"
      :key="index"
    >
      <img class="avatar radius-10" :src="image" />
      <div class="flex-1 ml-md">
        <div class="f-title c-title">菜品名称</div>
        <div class="f-caption c-caption mt-sm mb-sm">菜品规格</div>
        <div class="flex-y-center">
          <div class="flex-y-baseline f-caption c-warning">
            ¥
            <div class="f-big-title">88</div>
            <div class="f-caption c-caption text-delete ml-md">¥98</div>
          </div>
        </div>
      </div>
    </div>
    <div class="fill-body space-lg"></div>
  </div>
</template>

<script>
export default {
  name: 'restaurantGoodsList',
  props: {
    o: Object,
    isMyGoods: false
  },
  data () {
    return {
      primaryColor: '#19c865',
      image: 'https://lbqny.migugu.com/admin/diy/default.png'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.normal-list {
  display: flex;
  align-items: center;
  height: 50px;
  background: #fff;
  line-height: 1;
}
.avatar {
  width: 75px;
  height: 75px;
}
</style>
